<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/tag.jsp"%>
<%@ include file="/WEB-INF/include/common.jsp"%>

<link rel="stylesheet" href="${ctx}/statics/css/custom_theme.css" />
<div class="modal fade" id="userRoleModel" tabindex="-1" role="dialog" aria-labelledby="userRoleModelLabel" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                	<span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="userRoleModelLabel">${subTitle}</h4>
            </div>
            <div class="modal-body">
        		<div id="userRoleModel_modal_body"></div>
            </div>
        </div>
    </div>
</div>

<!-- 模态窗口 -->
<div class="modal fade" id="userModel" tabindex="-1" role="dialog" aria-labelledby="userModelLabel" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                	<span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" >添加账户</h4>
            </div>
            <div class="modal-body">
            	<form id="tag_edit_form" class="form-horizontal">
			        <input type="hidden" id="tag_id" name="id">
			        <div class="form-group">
			        	<label class="control-label col-sm-3">标签名：</label>
			        	<div class="col-sm-8">
				            <input type="text" class="form-control" id="tagName" name="name" >
			        	</div>
		        	</div>
		        	<div class="form-group">
			        	<label class="control-label col-sm-3">标签编码：</label>
			        	<div class="col-sm-8">
				            <input type="text" class="form-control" id="tagCode" name="code">
			        	</div>
			        </div>
			    </form>
            </div>
            <div class="modal-footer">
            	<button type="button" class="btn btn-sm btn-primary" id="userModelBtn">确定</button>
                <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" id="Close">关闭</button>
            </div>
        </div>
   </div>
</div>
<div id="main-content">
	<div class="row" >
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">${title}</div>
				<!-- /.panel-heading -->
				<div class="panel-body" >
					<div class="row">
						<div class="col-xs-12">
							<!-- PAGE CONTENT BEGINS -->
							<form class="form-horizontal" role="form" id="user_search_form">
								<div class="col-sm-9">
									<label class="col-sm-1 control-label">名称</label>
									<div class="col-sm-3">
										<input id="search_realName" name="name" type="text" laceholder="标签名称"/> 
									</div>
									<label class="col-sm-1 control-label">编码 </label>
									<div class="col-sm-3">
										<input id="search_loginName" name="code" type="text" laceholder=" 标签编码"/> 
									</div>
								</div>
								<div class="col-sm-3">
									<div class="col-sm-4">
										<button class="btn btn-sm btn-info" type="submit">
											<i class="icon-search nav-search-icon"></i>
											查询
										</button> 
									</div>
									<div class="col-sm-4"> 
										<button type="button" class="btn btn-success btn-sm" onclick="addData()"><i class="icon-plus bigger-110"></i>新增</button>
									</div>
									<div class="col-sm-4">
										<button class="btn btn-sm btn-primary" type="reset"	>
											<i class="icon-undo bigger-110"></i>
											清除
										</button> 
									</div>
								</div>
								
									
									
							</form>
						</div>
					</div>
					<table id="user_table" class="table table-bordered table-hover">
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
$(function(){
	$('#user_table').bootstrapTable({
		url: '${ctx}/business/tag/getTagList.do',
		pagination: true,
		paginationLoop: false,
		smartDisplay: false,
	    pageSize: 10,
	    pageList: [10, 20, 50, 100],
	    sidePagination: 'server',
	    paginationNextText:'下一页',
	    paginationPreText:'上一页',
	    cache: false,
		columns: [
		 {
			field: '',
			title: '操作',
			align: 'center',
			width :'120px',
			formatter: function(value, row, index){
				return '<button class="btn btn-xs btn-success" id="querytagItem" title="查看标签值"><i class="icon-external-link bigger-130"></i></button>'
						+'<button class="btn btn-xs btn-info" id="editData" title="编辑"><i class="icon-edit bigger-130"></i></button>'
						+'<button class="btn btn-xs btn-danger" id="deleteData" title="删除"><i class="icon-trash bigger-130"></i></button>';
			},
			events: {
				'click #editData': editData,
				'click #deleteData': deleteData,
				'click #querytagItem':querytagItem,
			}
		},{
			field: 'id',
			title: 'ID',
			align: 'center'
		},{
			field: 'name',
			title: '标签名',
			align: 'center'
		},{
			field: 'code',
			title: '编码',
			align: 'center'
		},{
			field: 'item',
			formatter: function(value, row, index){
				var str="";
				for(var i=0;i<value.length;i++){
					if(value[i].isDisable){
						str +='[<span style="color:red" title="已禁用">'+ value[i].name +"</span>] ";
					}else{
						str +='[<span style="color:green">'+ value[i].name +"</span>] ";
					}
				} 
				return str;
			},
			title: '标签值'
			
		}],
		queryParams: function(params){
			//console.log(params);
			//params.usreId
			$.extend(params,$("#user_search_form").serializeJson());
			return params;
		}
	});

	$('#user_table').on('mouseenter','.pannel_a_title',function () {
        $(this).popover('show');
	});
	
	//添加和编辑请求验证
	$("#tag_edit_form").validate({
		rules: {
			name:{required:true},
			code:{required:true}
		},
		submitHandler: function(form) {
			$("#userModel").prop("disabled",true);
    		$(form).ajaxSubmit({
    			type:"post",
    			dataType:"json",
    			url:"${ctx}/business/tag/saveOrUpdateTag.do",
    			success:function(data){
    				if(data.success==true){
    					$('#userModel').modal('hide') 
    					$('#user_table').bootstrapTable('refresh');
    				}else{
    					alert(data.errorMessage);
    				}
    				$("#userModel").prop("disabled",false);
                }  
            });
		}
	});
	
	//提交信息
	$("#userModel").on('click','#userModelBtn',function(){
		$("#tag_edit_form").submit();
	});
	
	//搜索
	$("#user_search_form").submit(function(e){
		e.preventDefault();
		$('#user_table').bootstrapTable('refresh');
	});
	
});

//查询列表
function querytagItem(e, v, row){
	window.location.href="${ctx}/business/tag/totagItemPage.do?title=标签值管理&tagId="+row.id;
	//window.open("${ctx}/admin/tag/totagItemPage.do?tagCode="+row.tagCode);
}

//添加
function addData(e, v, row) {
	$("#userModel .modal-title").empty().html("添加标签项");
	$("#tag_edit_form").resetForm();
	$("#tag_edit_form input[name=id]").val("");
	$("#tag_edit_form input[name=tagCode]").removeAttr("disabled");//解除输入框禁用
	$('#userModel').modal('show');
}

//编辑
function editData(e, v, row) {
	$("#userModel .modal-title").empty().html("修改标签");
	$("#tag_edit_form").resetForm();
	$("#tag_edit_form input[name=id]").val(row.id);
	$("#tag_edit_form input[name=name]").val(row.name);
	$("#tag_edit_form input[name=code]").val(row.code);
	$("#tag_edit_form input[name=isDisable]").val(row.isDisable);
	$('#userModel').modal('show');
}


	//删除
	function deleteData(e, v, row) {
		if (confirm("确定删除吗？")) {
			$.ajax({
				url : "${ctx}/business/tag/deleteTag.do",
				type : "POST",
				data : {
					"id" : row.id
				},
				success : function(data) {
					if (data.success) {
						$('#user_table').bootstrapTable('refresh');
					} else {
						alert(data.errorMessage);
					}
				}
			});
		}
	}
</script>